<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="input-group">
    <input type="file" id="test1" onchange="messageFuncArray.choosefile($(this))"
           accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" multiple/>
    <!--  <input type="file" id="test1" onchange="messageFuncArray.choosefile($(this))" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">-->
    <input id="test2" type="button" class="btn btn-default form-control" value="请选择文件"
           onclick="document.getElementById('test1').click()">
</div>
<button class="btn btn-primary btn-md-2" onclick="messageFuncArray.createNews()">发表</button>
</body>

<script src="https://cn.vuejs.org/">

    var messageFuncArray = {
        choosefile: function (t) {
            debugger;
            var val = t.val();
            //t.siblings("img").remove();
            //   var files = t.get(0).files;
            this.creactimg(t.get(0).files[0], t);
            // if(files.length > 1){
            //   for(var  i = 0; i < files.length; i++){
            //       this.creactimg(t.get(0).files[i],t);
            //   }
            // }else{
            //
            // }
        },

        createNews: function () {
            var messageInfo = $('#news').val();
            var file = $("#test1").val();
            if (!file) {
                alert("上传图片哦");
                return
            }
            var fd = new FormData();
            // fd.append("file",$("#test1").get(0).files[0])
            for (var i = 0; i < filesArray.length; i++) {
                fd.append("file" + i, filesArray[i]);
            }
            //fd.append("file",$("#test1"));
            fd.append("messageInfo", messageInfo)
            fd.append("userId", userId)
            $.ajax({
                url: contextPath + messagePath + '/addMessage',
                method: "post",
                // contentType:"multipart/form-data",
                contentType: false,
                processData: false,
                async: false,
                data: fd,
                success: function (data) {
                    debugger
                    var dataList = data.dataList,
                        newsFeedItemGrid = $('#newsfeed-items-grid'),
                        articleHtml = '';
                    articleHtml += '<div class="ui-block display-none">';
                    articleHtml += toArticleHtml(dataList[0], dataList[1]);
                    articleHtml += commentTextarea(userId, $('#userLogo').attr('src'));
                    articleHtml += '</div>';
                    debugger;
                    newsFeedItemGrid.prepend(articleHtml);
                    $('#newsfeed-items-grid .ui-block:first-child').show(300);
                    $('.tab-pane').find('textarea').val('');
                    $("#test1").val("");
                    $("#test1").siblings("img").remove();
                    filesArray = [];
                },
                error: function () {

                }
            })

        }
    }


    function toArticleHtml(user, message) {
        var img = message.messagePicture.split(",");
        var imgstr = "";
        if (img.length != 0) {
            for (var i = 0; i < img.length - 1; i++) {
                imgstr += "<div><img src=static/img/upload/" + img[i] + " /></div>";
            }
        }

        return '<article class="hentry post video">' +
            '<span class="message-id display-none">' + message.messageId + '</span>' +
            '<div class="post__author author vcard inline-items">' +
            '<img src="' + user.userLogo + '" alt="' + user.userId + '">' +
            '<div class="author-date">' +
            '<a class="h6 post__author-name fn" href="javascript:void(0)">' + user.userNickname + '</a>' +
            '<div class="post__date">' +
            '<time class="published" datetime="2004-07-24T18:18">' + time(message.messageTime) + '</time>' +
            '</div>' +
            '</div>' +
            '<div class="more">' +
            '<svg class="olymp-three-dots-icon">' +
            '<use xlink:href="static/svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>' +
            '</svg>' +
            '<ul class="more-dropdown">' +
            '<li><a href="javascript:void(0)" onclick="messageFuncArray.delMessage($(this))">删除消息</a></li><li><a href="javascript:void(0)" onclick="messageFuncArray.setoursSee(' + message.messageId + ')">仅自己可见</a></li>' +
            '</ul>' +
            '</div>' +
            '</div>' +
            '<p>' + message.messageInfo + '</p>' + imgstr + '<div class="post-additional-info inline-items">' +
            '<a href="javascript:void(0)" onclick="messageFuncArray.addCollect($(this))" ' +
            'class="post-add-icon inline-items">' +
            '<svg class="olymp-heart-icon">' +
            '<use xlink:href="static/svg-icons/sprites/icons.svg#olymp-heart-icon"></use>' +
            '</svg>' +
            '<span>' + message.messageCollect + '</span>' +
            '</a>' +
            '<div class="comments-shared">' +
            '<a href="javascript:void(0)" class="post-add-icon inline-items">' +
            '<svg class="olymp-speech-balloon-icon">' +
            '<use xlink:href="static/svg-icons/sprites/icons.svg#olymp-speech-balloon-icon"></use>' +
            '</svg>' +
            '<span>' + message.messageComment + '</span>' +
            '</a>' +
            '</div>' +
            '</div>' +
            '<div class="control-block-button post-control-button"></div>' +
            '</article>';
    }
</script>
</html>